<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ html_report_name }} - TestReport</title>
    <style>
        body {
            background-color: #f2f2f2;
            color: #333;
            margin: 0 auto;
            width: 960px;
        }

        #summary {
            width: 960px;
            margin-bottom: 20px;
        }

        #summary th {
            background-color: skyblue;
            padding: 5px 12px;
        }

        #summary td {
            background-color: lightblue;
            text-align: center;
            padding: 4px 8px;
        }

        .details {
            width: 960px;
            margin-bottom: 20px;
        }

        .details th {
            background-color: skyblue;
            padding: 5px 12px;
        }

        .details tr .True {
            background-color: lightgreen;
        }

        .details tr .False {
            background-color: red;
        }

        .details tr .unchecked {
            background-color: gray;
        }

        .details td {
            background-color: lightblue;
            padding: 5px 12px;
        }

        .details .detail {
            background-color: lightgrey;
            font-size: smaller;
            padding: 5px 10px;
            line-height: 20px;
            text-align: left;
        }

        .details .success {
            background-color: greenyellow;
        }

        .details .error {
            background-color: red;
        }

        .details .failure {
            background-color: salmon;
        }

        .details .skipped {
            background-color: gray;
        }

        .button {
            font-size: 1em;
            padding: 6px;
            width: 4em;
            text-align: center;
            background-color: #06d85f;
            border-radius: 20px/50px;
            cursor: pointer;
            transition: all 0.3s ease-out;
        }

        a.button {
            color: gray;
            text-decoration: none;
            display: inline-block;
        }

        .button:hover {
            background: #2cffbd;
        }

        .overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            transition: opacity 500ms;
            visibility: hidden;
            opacity: 0;
            line-height: 25px;
        }

        .overlay:target {
            visibility: visible;
            opacity: 1;
        }

        .popup {
            margin: 70px auto;
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            width: 50%;
            position: relative;
            transition: all 3s ease-in-out;
        }

        .popup h2 {
            margin-top: 0;
            color: #333;
            font-family: Tahoma, Arial, sans-serif;
        }

        .popup .close {
            position: absolute;
            top: 20px;
            right: 30px;
            transition: all 200ms;
            font-size: 30px;
            font-weight: bold;
            text-decoration: none;
            color: #333;
        }

        .popup .close:hover {
            color: #06d85f;
        }

        .popup .content {
            max-height: 80%;
            overflow: auto;
            text-align: left;
        }

        .popup .separator {
            color: royalblue
        }

        @media screen and (max-width: 700px) {
            .box {
                width: 70%;
            }

            .popup {
                width: 70%;
            }
        }
    </style>
</head>

<body>
<h1>Test Report: {{ html_report_name }}</h1>

<h2>Summary</h2>
<table id="summary">

    <tr>
        <th>START AT</th>
        <td colspan="4">{{ time.start_datetime }}</td>
    </tr>
    <tr>
        <th>DURATION</th>
        <td colspan="4">{{ '%0.3f'| format(time.duration|float) }} seconds</td>
    </tr>
    <tr>
        <th>PLATFORM</th>
        <td>HttpRunner {{ platform.httprunner_version }} </td>
        <td>{{ platform.python_version }} </td>
        <td colspan="2">{{ platform.platform }}</td>
    </tr>
    <tr>
        <th>TOTAL</th>
        <th>SUCCESS</th>
        <th>FAILED</th>
        <th>ERROR</th>
        <th>SKIPPED</th>
    </tr>
    <tr>
        <td>{{ stat.testsRun }}</td>
        <td>{{ stat.successes }}</td>
        {% if stat.failures > 0 %}
            <td style="background-color: red">{{ stat.failures }}</td>
        {% else %}
            <td>{{ stat.failures }}</td>
        {% endif %}
        <td>{{ stat.errors }}</td>
        <td>{{ stat.skipped }}</td>
    </tr>
</table>

<h2>Details</h2>

{% for test_suite_summary in details %}
    {% set suite_index = loop.index %}
    <h3>{{ test_suite_summary.name }}</h3>
    <table id="suite_{{ suite_index }}" class="details">
        <tr>
            <th>base_url</th>
            <td colspan="2">{{ test_suite_summary.base_url }}</td>
            <td colspan="2" class="detail">
                <a class="button" href="#suite_output_{{ suite_index }}" style="display: inline;">parameters & output</a>
                <div id="suite_output_{{ suite_index }}" class="overlay">
                    <div class="popup">
                        <h2>Parameters and Output</h2>
                        <a class="close" href="#suite_{{ suite_index }}">&times;</a>
                        <div class="content">
                            <div style="overflow: auto">
                                <table>
                                    {% if test_suite_summary.in_out %}
                                        {% for key, value in test_suite_summary.in_out.items() %}
                                            <tr>
                                                <th>{{ key }}</th>
                                                <td>
                                                    <pre>{{ value  }}</pre>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>TOTAL: {{ test_suite_summary.stat.testsRun }}</td>
            <td>SUCCESS: {{ test_suite_summary.stat.successes }}</td>
            <td>FAILED: {{ test_suite_summary.stat.failures }}</td>
            <td>ERROR: {{ test_suite_summary.stat.errors }}</td>
            <td>SKIPPED: {{ test_suite_summary.stat.skipped }}</td>
        </tr>
        <tr>
            <th>Status</th>
            <th colspan="2">Name</th>
            <th>Response Time</th>
            <th>Detail</th>
        </tr>

        {% for record in test_suite_summary.records %}
            {% set record_index = "{}_{}".format(suite_index, loop.index) %}
            <tr id="record_{{ record_index }}">
                <th class="{{ record.status }}" style="width:5em;">{{ record.status }}</th>
                <td colspan="2">{{ record.name }}</td>
                <td style="text-align:center;width:6em;">{{ record.meta_data.stat.response_time_ms }} ms</td>
                <td class="detail">

                    <a class="button" href="#popup_log_{{ record_index }}">log</a>
                    <div id="popup_log_{{ record_index }}" class="overlay">
                        <div class="popup">
                            <h2>Request and Response data</h2>
                            <a class="close" href="#record_{{ record_index }}">&times;</a>

                            <div class="content">
                                <h3>Request:</h3>
                                <div style="overflow: auto">
                                    <table>
                                        {% for key, value in record.meta_data.request.items() %}
                                            {% if key!= 'json' %}
                                                <tr>
                                                    <th>{{ key }}</th>
                                                    <td>
                                                        {% if key == "headers" %}
                                                            {% for header_key, header_value in record.meta_data.request.headers.items() %}
                                                                <div>
                                                                    <strong>{{ header_key }}</strong>: {{ header_value }}
                                                                </div>
                                                            {% endfor %}
                                                        {% else %}
                                                            {{ value }}
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        {% endfor %}
                                    </table>
                                </div>

                                <h3>Response:</h3>
                                <div style="overflow: auto">
                                    <table>
                                        {% for key, value in record.meta_data.response.items() %}
                                            {% if key in ["text", "json", "elapsed_ms", "response_time_ms", "content_size", "content_type"] %}
                                                {% continue %}
                                            {% endif %}
                                            <tr>
                                                <th>{{ key }}</th>
                                                <td>
                                                    {% if key == "headers" %}
                                                        {% for header_key, header_value in record.meta_data.response.headers.items() %}
                                                            <div>
                                                                <strong>{{ header_key }}</strong>: {{ header_value }}
                                                            </div>
                                                        {% endfor %}
                                                    {% elif key == "content" %}
                                                        {% if "image" in record.meta_data.response.content_type %}
                                                            <img src="{{ record.meta_data.response.content }}"/>
                                                        {% else %}
                                                            <pre>{{ record.meta_data.response.text | e }}</pre>
                                                        {% endif %}
                                                    {% else %}
                                                        {{ value }}
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </table>
                                </div>

                                <h3>Validators:</h3>
                                <div style="overflow: auto">
                                    <table>
                                        <tr>
                                            <th>check</th>
                                            <th>comparator</th>
                                            <th>expect value</th>
                                            <th>actual value</th>
                                        </tr>
                                        {% for validator in record.meta_data.validators %}
                                            <tr>
                                                {% if validator.check_result == "pass" %}
                                                    <td class="passed">
                                                        {% elif validator.check_result == "fail" %}
                                                    <td class="failed">
                                                        {% elif validator.check_result == "unchecked" %}
                                                    <td class="unchecked">
                                                {% endif %}
                                                {{ validator.check | e }}
                                                </td>
                                                <td>{{ validator.comparator }}</td>
                                                <td>{{ validator.expect | e }}</td>
                                                <td>{{ validator.check_value | e }}</td>
                                            </tr>
                                        {% endfor %}
                                    </table>
                                </div>

                                <h3>Statistics:</h3>
                                <div style="overflow: auto">
                                    <table>
                                        <tr>
                                            <th>content_size(bytes)</th>
                                            <td>{{ record.meta_data.stat.content_size }}</td>
                                        </tr>
                                        <tr>
                                            <th>response_time(ms)</th>
                                            <td>{{ record.meta_data.stat.response_time_ms }}</td>
                                        </tr>
                                        <tr>
                                            <th>elapsed(ms)</th>
                                            <td>{{ record.meta_data.stat.elapsed_ms }}</td>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>

                    {% if record.attachment %}
                        <a class="button" href="#popup_attachment_{{ record_index }}">traceback</a>
                        <div id="popup_attachment_{{ record_index }}" class="overlay">
                            <div class="popup">
                                <h2>Traceback Message</h2>
                                <a class="close" href="#record_{{ record_index }}">&times;</a>
                                <div class="content">
                                    <pre>{{ record.attachment }}</pre>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                </td>
            </tr>
        {% endfor %}
    </table>
{% endfor %}
</body>
